<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button
                        style="float: right"
                        @click="handleSearchList()"
                        type="primary"
                        size="small">
                    查询结果
                </el-button>
                <el-button
                        style="float: right;margin-right: 15px"
                        @click="handleResetSearch()"
                        size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="商品名称：">
                        <el-input style="width: 203px" v-model="listQuery.productName" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品货号：">
                        <el-input style="width: 203px" v-model="listQuery.productId" placeholder="商品货号"></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌：">
                        <el-select v-model="listQuery.brandId" placeholder="请选择品牌" clearable>
                            <el-option
                                    v-for="item in brandOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="新品状态：">
                        <el-select v-model="listQuery.newStatus" placeholder="新品/旧物" clearable>
                            <el-option
                                    v-for="item in newStatusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="热门状态：">
                        <el-select v-model="listQuery.hotStatus" placeholder="热门/落伍" clearable>
                            <el-option
                                    v-for="item in hotStatusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态：">
                        <el-select v-model="listQuery.verifyStatus" placeholder="全部" clearable>
                            <el-option
                                    v-for="item in verifyStatusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button
                    class="btn-add"
                    @click="handleAddProduct()"
                    size="mini">
                添加
            </el-button>
        </el-card>
        <div class="table-container">
            <el-table ref="productTable"
                      :data="list"
                      style="width: 100%"
                      @selection-change="handleSelectionChange"
                      v-loading="listLoading"
                      border>
                <el-table-column type="selection" width="60" align="center"></el-table-column>
                <el-table-column label="编号" width="70" align="center" prop="id">
                    <template slot-scope="scope">{{scope.row.id}}</template>
                </el-table-column>
                <el-table-column label="spuId" width="70" align="center" prop="spuid">
                    <template slot-scope="scope">{{scope.row.spuid}}</template>
                </el-table-column>
                <el-table-column label="商品图片" width="120" align="center" prop="pic">
                    <template slot-scope="scope"><img style="width: 100%" :src="scope.row.pic"></template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" prop="name" >
                    <template slot-scope="scope">
                        <p>{{scope.row.name}}</p>
                        <p>品牌：{{brandName}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商品进价" width="120" align="center" prop="initPrice">
                    <template slot-scope="scope">
                        <p>价格：￥{{scope.row.initPrice}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商品售价" width="120" align="center" prop="price">
                    <template slot-scope="scope">
                        <p>价格：￥{{scope.row.price}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="设为新品" width="140" align="center" >
                    <template slot-scope="scope">
                        <p>新品：
                            <el-switch
                                    @change="handleNewStatusChange(scope.row.id,scope.row.isnew)"

                                    v-model="scope.row.isnew">
                            </el-switch>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="规格属性" width="130" align="center" prop="defaultSpec">
                    <template slot-scope="scope">{{scope.row.defaultSpec}}</template>
                </el-table-column>
                <el-table-column label="SKU库存" width="80" align="center" prop="stock">
                    <template slot-scope="scope">
                        <p>{{scope.row.stock}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" width="100" align="center" prop="verifyStatus">
                    <template slot-scope="scope">
                        <p>{{scope.row.verifyStatus}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center" prop="id">
                    <template slot-scope="scope">
                        <p>
                            <el-button
                                    size="mini"
                                    @click="handleShowProduct(scope.row.id)">查看
                            </el-button>
                            <el-button
                                    size="mini"
                                    @click="handleUpdateProduct(scope.row.id)">编辑
                            </el-button>
                        </p>
                        <p>
                            <!--<el-button
                                    size="mini"
                                    @click="handleShowLog(scope.$index, scope.row)">日志
                            </el-button>-->
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete( scope.row.id)">删除
                            </el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="topin"></div>
        <div class="batch-operate-container">
            <el-select
                    size="small"
                    v-model="operateType" placeholder="批量操作">
                <el-option
                        v-for="item in operates"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button
                    style="margin-left: 20px"
                    class="search-button"
                    @click="handleBatchOperate()"
                    type="primary"
                    size="small">
                确定
            </el-button>
        </div>
        <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :page-size="pageSize"
                    :page-sizes="[5,10,15]"
                    :current-page.sync="pageNum"
                    :total="total">
            </el-pagination>
        </div>
        <div class="topin"></div>
        <el-dialog
                title="编辑货品信息"
                :visible.sync="editSkuInfo.dialogVisible"
                width="40%">
            <span>商品货号：</span>
            <span>{{editSkuInfo.productSn}}</span>
            <el-input placeholder="按sku编号搜索" v-model="editSkuInfo.keyword" size="small" style="width: 50%;margin-left: 20px">
                <el-button slot="append" icon="el-icon-search" @click="handleSearchEditSku"></el-button>
            </el-input>
            <el-table style="width: 100%;margin-top: 20px"
                      :data="editSkuInfo.stockList"
                      border>
                <el-table-column
                        label="SKU编号"
                        align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.skuCode"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        v-for="(item,index) in editSkuInfo.productAttr"
                        :label="item.name"
                        :key="item.id"
                        align="center">
                    <template slot-scope="scope">
                        {{getProductSkuSp(scope.row,index)}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="销售价格"
                        width="80"
                        align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.price"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品库存"
                        width="80"
                        align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.stock"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="库存预警值"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.lowStock"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editSkuInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSkuConfirm">确 定</el-button>
      </span>
        </el-dialog>
        <div class="topin"></div>
    </div>
</template>

<script>
    const defaultListQuery = {
        productName: null,
        pageNum: 1,
        pageSize: 5,
        productId: null,
        brandId:null,
        newStatus:null,
        hotStatus:null,
        verifyStatus:null
    };

    export default {
        name: "ProductManage",
        data(){
            return{
                productName:null,
                brandName:'',//品牌的名字
                productId:null,
                pageNum:1,
                pageSize:5,
                status:null,
                isnew:null,
                ishot:null,
                editSkuInfo:{
                    dialogVisible:false,
                    productId:null,
                    productSn:'',
                    productAttributeCategoryId:null,
                    stockList:[],
                    productAttr:[],
                    keyword:null
                },
                operates: [
                    {
                        label: "商品上架",
                        value: "publishOn"
                    },
                    {
                        label: "商品下架",
                        value: "publishOff"
                    },
                    {
                        label: "设为热门",
                        value: "recommendOn"
                    },
                    {
                        label: "取消热门",
                        value: "recommendOff"
                    },
                    {
                        label: "设为新品",
                        value: "newOn"
                    },
                    {
                        label: "取消新品",
                        value: "newOff"
                    },
                    {
                        label: "转移到分类",
                        value: "transferCategory"
                    },
                    {
                        label: "移入回收站",
                        value: "recycle"
                    }
                ],
                operateType: null,
                listQuery: Object.assign({}, defaultListQuery),
                list: [],
                total: '',
                listLoading: true,
                selectProductCateValue: null,
                multipleSelection: [],
                productCateOptions: [],
                brandOptions: [],
                sysUserName:'',//当前系统的用户名
                newStatusOptions: [{
                    value: 0,
                    label: '旧物'
                }, {
                    value: 1,
                    label: '新品'
                }],
               hotStatusOptions: [{
                    value: 1,
                    label: '热门'
                }, {
                    value: 0,
                    label: '落伍'
                }],
                verifyStatusOptions: [{
                    value: 1,
                    label: '审核通过'
                }, {
                    value: 0,
                    label: '未审核'
                }]
            }
        },
        created() {
            var user = sessionStorage.getItem('user');
            if (user) {
                user = JSON.parse(user);
                this.sysUserName = user.username;
            }
            this.getList();
            this.getBrandList();
            //this.getProductCateList();
        },
        watch: {
            selectProductCateValue: function (newValue) {
                if (newValue != null && newValue.length == 2) {
                    this.listQuery.productCategoryId = newValue[1];
                } else {
                    this.listQuery.productCategoryId = null;
                }

            }
        },
        methods:{
            getList() {
                this.listLoading = true;
                this.service.get("/product/manage/product/seller_pro.do",{
                    params:{
                        SellerId:this.sysUserName,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    //console.log(res.data);
                    var _this = this;
                    _this.list=[];
                    if (res.data.status==0){
                        _this.listLoading = false;
                        _this.total = res.data.data.total;

                        for (var i = 0;i<res.data.data.list.length;i++){
                            let productInf={
                                id:'',
                                spuid:'',
                                pic:'',
                                name:'',
                                initPrice:'',
                                price:'',
                                defaultSpec:'',
                                stock:'',
                                verifyStatus:'',
                                status:'',
                                isnew:'',
                                ishot:''
                            };
                            productInf.id=res.data.data.list[i].id;
                            productInf.spuid=res.data.data.list[i].spu;
                            productInf.pic='http://img.cdn.imbession.top/'+res.data.data.list[i].mainImage;
                            productInf.name=res.data.data.list[i].name;
                            productInf.initPrice=res.data.data.list[i].packageList;
                            productInf.price=res.data.data.list[i].price;
                            productInf.defaultSpec=res.data.data.list[i].defaultItemId;
                            productInf.stock=res.data.data.list[i].stock;
                            if (res.data.data.list[i].status == 1) {
                                productInf.verifyStatus='审核通过';
                            }else if(res.data.data.list[i].status == 0){
                                productInf.verifyStatus='审核未通过';
                            }else{
                                productInf.verifyStatus='商品已删除';
                            }
                            productInf.isnew=res.data.data.list[i].new;


                            _this.service.get("/product/manage/productBrand/search.do",{
                                params:{
                                    brandId:res.data.data.list[i].brandId
                                }
                            }).then(ref=>{
                                //console.log(ref)
                                if (ref.status== 200) {
                                    _this.brandName = ref.data.data.list[0].name;
                                }
                            });
                            _this.list.push(productInf)
                        }
                    }
                })
            },
            getBrandList(){
                this.service.get("/product/manage/productBrand/brandList").then(ref=>{
                    if (ref.status==200) {
                        this.brandOptions = ref.data.data
                    }
                })
            },
            handleSearchEditSku(){
                fetchSkuStockList(this.editSkuInfo.productId,{keyword:this.editSkuInfo.keyword}).then(response=>{
                    this.editSkuInfo.stockList=response.data;
                });
            },
            handleEditSkuConfirm(){
                if(this.editSkuInfo.stockList==null||this.editSkuInfo.stockList.length<=0){
                    this.$message({
                        message: '暂无sku信息',
                        type: 'warning',
                        duration: 1000
                    });
                    return
                }
                this.$confirm('是否要进行修改', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    updateSkuStockList(this.editSkuInfo.productId,this.editSkuInfo.stockList).then(response=>{
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.editSkuInfo.dialogVisible=false;
                    });
                });
            },
            handleSearchList() {
                this.service.get("/product/manage/product/combinesearch",{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,

                        productName:this.listQuery.productName,
                        productId:this.listQuery.productId,
                        isnew:this.listQuery.newStatus,
                        ishot:this.listQuery.hotStatus,
                        status:this.listQuery.verifyStatus,
                        brandid:this.listQuery.brandId,
                        SellerId:this.sysUserName
                    }
                }).then(res=>{

                    if (res.data.status == 0){
                        this.list = [];
                        this.total = res.data.data.total;
                        for (var i = 0;i<res.data.data.list.length;i++){
                            let productInf={
                                id:'',
                                spuid:'',
                                pic:'',
                                name:'',
                                initPrice:'',
                                price:'',
                                defaultSpec:'',
                                stock:'',
                                verifyStatus:'',
                                status:'',
                                isnew:'',
                                ishot:''
                            };
                            productInf.id=res.data.data.list[i].id;
                            productInf.spuid=res.data.data.list[i].spu;
                            productInf.pic='http://img.cdn.imbession.top/'+res.data.data.list[i].mainImage;
                            productInf.name=res.data.data.list[i].name;
                            productInf.initPrice=res.data.data.list[i].packageList;
                            productInf.price=res.data.data.list[i].price;
                            productInf.defaultSpec=res.data.data.list[i].defaultItemId;
                            productInf.stock=res.data.data.list[i].stock;
                            if (res.data.data.list[i].status == 1) {
                                productInf.verifyStatus='审核通过';
                            }else if(res.data.data.list[i].status == 0){
                                productInf.verifyStatus='审核未通过';
                            }else{
                                productInf.verifyStatus='商品已删除';
                            }
                            productInf.isnew=res.data.data.list[i].new;


                            this.service.get("/product/manage/productBrand/search.do",{
                                params:{
                                    brandId:res.data.data.list[i].brandId
                                }
                            }).then(ref=>{
                                //console.log(ref)
                                if (ref.status== 200) {
                                    this.brandName = ref.data.data.list[0].name;
                                }
                            });
                            this.list.push(productInf)
                        }
                    }
                })
              /* /!* this.listQuery.verifyStatus='';
                this.listQuery.productName='';
                this.listQuery.publishStatus='';
                this.listQuery.productId='';
                this.listQuery.brandId='';*!/
                console.log(this.listQuery.verifyStatus)
                console.log(this.listQuery.productName)
                console.log(this.listQuery.publishStatus)
                console.log(this.listQuery.productId)
                console.log(this.listQuery.brandId)*/


            },
         /*   handleSearchList() {
                this.pageNum = 1;
                this.getList();
            },*/
            handleAddProduct() {
                this.$router.push(
                    {
                        name:'商品列表'
                    });
            },
            handleBatchOperate(){

            },
            /*handleBatchOperate() {
                if(this.operateType==null){
                    this.$message({
                        message: '请选择操作类型',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                if(this.multipleSelection==null||this.multipleSelection.length<1){
                    this.$message({
                        message: '请选择要操作的商品',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                this.$confirm('是否要进行该批量操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids=[];
                    for(let i=0;i<this.multipleSelection.length;i++){
                        ids.push(this.multipleSelection[i].id);
                    }
                    switch (this.operateType) {
                        case this.operates[0].value:
                            this.updatePublishStatus(1,ids);
                            break;
                        case this.operates[1].value:
                            this.updatePublishStatus(0,ids);
                            break;
                        case this.operates[2].value:
                            this.updateRecommendStatus(1,ids);
                            break;
                        case this.operates[3].value:
                            this.updateRecommendStatus(0,ids);
                            break;
                        case this.operates[4].value:
                            this.updateNewStatus(1,ids);
                            break;
                        case this.operates[5].value:
                            this.updateNewStatus(0,ids);
                            break;
                        case this.operates[6].value:
                            break;
                        case this.operates[7].value:
                            this.updateDeleteStatus(1,ids);
                            break;
                        default:
                            break;
                    }
                    this.getList();
                });
            },*/
            //选择每页显示的数据是多少
            handleSizeChange(val) {
                //console.log(val);
                this.pageNum = 1;
                this.pageSize = val;
                this.getList();

            },
            //页数前进
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getList();
            },
            //批量操作的用到的数据(每行的对象数据)
            handleSelectionChange(val) {
                this.multipleSelection = val;
               // console.log(val)
            },
            handleNewStatusChange(productId ,isnew) {
                //console.log(isnew);
                if (isnew==false) {
                    this.service.get("/product/manage/product/updateisnew.do",{
                        params:{
                            productId:productId,
                            isnew:0
                        }
                    }).then(res=>{
                        if (res.data.status==0){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }else{
                            this.$message.error('修改失败');
                        }
                    });
                }
                if (isnew==true) {
                    this.service.get("/product/manage/product/updateisnew.do",{
                        params:{
                            productId:productId,
                            isnew:1
                        }
                    }).then(res=>{
                        if (res.data.status==0){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }else{
                            this.$message.error('修改失败');
                        }
                    });
                }

            },

            handleResetSearch() {
               /* this.selectProductCateValue = [];
               this.listQuery = Object.assign({}, defaultListQuery);*/
                this.listQuery.verifyStatus='';
                this.listQuery.productName='';
                this.listQuery.publishStatus='';
                this.listQuery.productId='';
                this.listQuery.brandId='';
            },
            handleDelete(productId){
                this.$confirm('是否要进行删除操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.service.get("/product/manage/product/delete.do",{
                        params:{
                            productId:productId
                        }
                    });
                    /*let ids = [];
                    ids.push(row.id);
                    this.updateDeleteStatus(1,ids);*/
                    this.getList();
                });
            },
            handleUpdateProduct(productId){
                this.$router.push({name:'修改商品信息',params:{productId:productId}});
            },
            handleShowProduct(index){
                this.$router.push({name:'商品详情',params:{productId:index}});

            },
            handleShowVerifyDetail(index,row){
                console.log("handleShowVerifyDetail",row);
            },
            handleShowLog(index,row){
                console.log("handleShowLog",row);
            },
            updatePublishStatus(publishStatus, ids) {
                let params = new URLSearchParams();
                params.append('ids', ids);
                params.append('publishStatus', publishStatus);
                updatePublishStatus(params).then(response => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1000
                    });
                });
            },
            updateNewStatus(newStatus, ids) {
                let params = new URLSearchParams();
                params.append('ids', ids);
                params.append('newStatus', newStatus);
                updateNewStatus(params).then(response => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1000
                    });
                });
            },
            updateRecommendStatus(recommendStatus, ids) {
                let params = new URLSearchParams();
                params.append('ids', ids);
                params.append('recommendStatus', recommendStatus);
                updateRecommendStatus(params).then(response => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1000
                    });
                });
            },
        },
    }
</script>

<style scoped>
    .el-pagination{
        float: right;
    }
    .batch-operate-container{
        float: left;

    }
    .topin{
        height:25px
    }
</style>